<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('navigationBar.userinfo')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
            <form class="form">
				<view class="uni-form-item">
					<view class="title">{{$t('setting.serialNumber')}}：</view>
					<input disabled class="uni-input" v-model="data.userInfo.userNameId" placeholder="编号" />
				</view>
                <view class="uni-form-item">
					<view class="title">{{$t('setting.name')}}：</view>
					<input disabled class="uni-input" v-model="data.userInfo.userName" placeholder="姓名" />
				</view>
                <view class="uni-form-item">
					<view class="title">{{$t('setting.sex')}}：</view>
					<input disabled class="uni-input" v-model="data.userInfo.sexText" placeholder="性别" />
				</view>
                <view class="uni-form-item">
					<view class="title">{{$t('setting.phone')}}：</view>
					<input disabled class="uni-input" v-model="data.userInfo.telephone" placeholder="" />
				</view>
                <view class="uni-form-item">
					<view class="title">{{$t('setting.department')}}：</view>
					<input disabled class="uni-input" v-model="data.userInfo.orgName" placeholder="部门" />
				</view>
                <view class="uni-form-item">
					<view class="title">{{$t('setting.organization')}}：</view>
					<input disabled  class="uni-input" v-model="data.userInfo.orgIdName" placeholder="所属组织" />
				</view>
			</form>
		</template>
	</gui-page>
</template>

<script setup>
    import {
		reLaunch
	} from '@/utils/routerSkip.js'
    import {
        getCurrentUser
	} from '@/api/api.js'
    import { USERINFO } from '@/constant/index.js'
	import {
		reactive,
		onMounted,
        watch
	} from 'vue';
     //引入国际化
	import { useI18n } from 'vue-i18n';
	const { t } = useI18n();

    let data = reactive({
		userInfo:{}
	})
	onMounted(()=>{
        if(!uni.getStorageSync(USERINFO)){
            requestData()
        }else{
            data.userInfo = uni.getStorageSync(USERINFO)
        }
	})
    watch(() => data.userInfo, (newVal) => {
        if(newVal){
            console.log(newVal)
            data.userInfo.sexText = newVal.sex === '1' ? t('materials.man') : t('materials.woman')
            data.userInfo.orgIdName = 'America' // 组织写死为美国
        }
    });
    const requestData = async ()=>{
        let res = await getCurrentUser({})
        if(res){
            data.userInfo = res
            uni.setStorageSync(USERINFO, data.userInfo);
        }else{
            uni.showToast({
                title: t('JsInternational.userInformationFailed'),
                icon: "none"
            });
        }
    }
</script>

<style lang="less">
.form{
    margin: 20rpx;
    // background: #fff;
    border-radius: 10rpx;
    .uni-form-item{
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 24rpx;
        border: 1rpx solid #A5A5A5;
        background: #fff;
        box-shadow: 0rpx 0rpx 8rpx 0 #A5A5A5;
        border-radius: 10rpx;
        overflow: hidden;
        margin-bottom: 24rpx;
        font-size: 26rpx;
        .title{
            color: #333;
            width: 170rpx;
        }
        .uni-input{
            flex: 1;
            color: #333;
            font-size: 26rpx;
        }
    }
    .checkbox{
        margin-top: 30rpx;
        display: flex;
        color: #fff;
        align-items: center;
        justify-content: flex-end;
    }
}
.button{
    background-color: rgb(55, 136, 108) !important;
    width: 100%;
}

</style>
